/**
 * 企业资质-弹框
 */
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ToThousandsTOOL, FixEmptyTOOL } from '@utils/index';
import { QualModalMAP, QualModalCXYMAP } from '@config/map';
import './style.scss';

export default defineComponent({
  name: 'QualificationModal',
  props: {
    data: Object,
    handleModal: Function,
  },
  render(props) {
    const router = useRouter();

    /**
     * 资质类型 点击跳转对应子页面
     * @param key {String} 每个label的key
     */
    const changePath = (comp) => {
      let path;
      switch (comp.code) {
        case '产学研载体':
          path = '/overview/iurCarrier';
          break;

        default:
          sessionStorage.setItem('qualificationType', comp.code);

          path = '/overview/qualificationDetail';
          break;
      }

      router.push({
        path,
      });
    };

    const { icon, label } = props.data;
    const dataArr = props?.data?.code === '产学研载体' ? QualModalCXYMAP : QualModalMAP;

    return (
      <div class={['QualificationModal', props?.data?.code === '产学研载体' ? 'iur_bg' : 'normal_bg']}>
        <header>
          <aside>
            {/* icon 图片及两层边框 */}
            <div>
              <div>
                <img src={require(`@assets/${icon}`)} />
              </div>
            </div>

            <h1>{label}</h1>

            {/* 查看详情 */}
            <img
              src={require(`@assets/modal/img_btn.png`)}
              onClick={() => {
                changePath(props.data);
              }}
            />
          </aside>

          {/* 关闭弹框 */}
          <img src={require(`@assets/modal/icon_close.png`)} onClick={props.handleModal} />
        </header>

        {/* 合作情况、公私联动、跨境联动 */}

        {dataArr.map((item) => (
          <div class="QualificationModal_row">
            <p>{item.label}</p>
            <ul>
              {item.child.map((l) => {
                const value = props?.data?.[l.key] ?? '-';

                return (
                  <li>
                    <header>{l.label}</header>

                    {/* 所有number类型数据进行 千位分割 格式化 */}
                    <b>{l.unit !== '%' ? ToThousandsTOOL(value) : FixEmptyTOOL(value)}</b>
                    <span>{l.unit}</span>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </div>
    );
  },
});
